<template>
<div class="recover">
   <div class='box'>
         <h1>数据导入</h1>
        <el-upload
	class="upload-demo"
	drag
	action="http://localhost:8082/sgudp/dp/customer/file"
	:on-change="handleChange"
	:headers="headers"
	:data="listData"
	name="file"
	ref="upload"
	accept=".xls,.xlsx"
	>
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">
		将xls/xlsx文件拖到此处，或<em>点击上传</em>
	</div>
</el-upload>

 
</div>
</div>
</template>

<script>
import axios from '../../../axios'
export default {

  name: 'backup',
  data () {
    return {
      headers:{
          Authorization:localStorage.getItem('Authorization'),
      },
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [],
      visible: true,
      file: {
        mimian: '',
        mimu: '',
        visible: false,
        fileName: '',
        location: '',
        type: '',
        fileName: ''
      },
      options: [{
        value: '选项1',
        label: '出库记录'
      }, {
        value: '选项2',
        label: '入库记录'
      }, {
        value: '选项3',
        label: '仓库环境'
      }, {
        value: '选项4',
        label: '盘查记录'
      }, {
        value: '选项5',
        label: '货物记录'
      },
      {
        value: '选项6',
        label: '员工'
      }]
    }
  },
  methods: {
    
    // 文件超出个数限制时的钩子
    exceedFile (files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
    // 文件状态改变时的钩子
    fileChange (file, fileList) {
      console.log(file.raw)
      this.fileList.push(file.raw)
      console.log(this.fileList)
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile (file) {
      console.log('before upload')
      console.log(file)
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        this.$message.warning('只能上传后缀是.xlsx的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    // 文件上传成功时的钩子
    handleSuccess (res, file, fileList) {
      this.$message.success('文件上传成功')
    },
    // 文件上传失败时的钩子
    handleError (err, file, fileList) {
      this.$message.error('文件上传失败')
    },
    UploadUrl: function () {
      // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return ''
    },
    uploadFile () {
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件')
      } else {
        var form = new FormData()
        form.append('file', this.fileList[0])
        console.log(form)
        console.log(form.get('file'))
        axios({
          url: '/dp/customer/file',
          method: 'post',
          data: this.form,
          headers: {
            'Content-Type': 'form-data'
          }
        }).then(
          res => {

          }, err => {
            console.log(err)
          })
      }
    }
  }
}
</script>

<style lang='less' scoped>
.recover{
     width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
    height: 670px;
.box{
   margin: 100px 350px;
    width: 500px;
    height: 500px;

}
h1{
     text-align: left;
    border-bottom: 2px solid black;
}
.btn{
    margin-top: 20px ;
    height: 50px;
    width: 500px;
}
}
</style>
